<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <van-nav-bar
    placeholder
    safe-area-inset-top
    fixed
    :title="title"
    :left-arrow="!isTabBarView"
    @click-left="handleRouterBack"
    v-if="!isHideHeader"
  />
</template>

<script setup>
import { computed } from 'vue' // 从Vue库中导入computed函数
import { useRoute, useRouter } from 'vue-router' // 从Vue Router库中导入useRoute和useRouter函数

// 使用computed函数创建一个计算属性isTabBarView，判断当前路由是否为"/tabBarView"路径
const isTabBarView = computed(() => useRoute()?.matched[0]?.path === '/tabBarView')

// 使用computed函数创建一个计算属性title，获取当前路由的元数据中的标题
const title = computed(() => useRoute()?.meta?.title)

// 使用computed函数创建一个计算属性isHideHeader，判断当前路由的元数据中是否隐藏导航栏
const isHideHeader = computed(() => useRoute()?.meta?.hideHeader)

// 使用useRouter函数创建一个router实例，用于处理路由跳转
const router = useRouter()

// 定义一个异步函数handleRouterBack，用于实现返回上一页的功能
async function handleRouterBack() {
  router.back() // 使用router.back()方法返回上一页
}

</script>

<style>
:root:root {
  --van-nav-bar-background: #ffc456;
  --van-nav-bar-title-text-color: #fff;
  --van-nav-bar-title-font-size: 16px;
  --van-nav-bar-arrow-size: 25px;
  --van-nav-bar-icon-color: #fff;
  --van-primary-color: #ffc456;
}
</style>
